﻿@{
    ViewBag.Title = "Product Category";
}
<table id="marbleTable" class="stripe row-border order-column" style="width: 100%">
    <thead>
        <th>ID</th>
        <th>Name</th>
        <th>ParentCategory</th>
        <th>Active</th>
    </thead>
    @foreach (var item in ViewBag.categories)
    {  
        <tr>
            <td>@item.Id  </td>
            <td>
                <input type="text" value="@item.Name"/>
            </td>
            <td>
                <select name="categoryList" id="categoryList">
                    @foreach (var dow in item.Categories)
                    {
                        if (@item.ParentCategory == @dow.Value)
                        {
                        <option value="@dow.Value" selected>@dow.Value</option>
                        }
                        else
                        {
                        <option value="@dow.Value">@dow.Value</option>
                        }
                    }
                </select>
            </td>
            <td>
                <input type="checkbox"  @(item.Active ? "checked='checked'" : "") value="@item.Active" />
            </td>
        </tr>  
    }
</table>


<div class="action">
    <button class="btn btn-primary btn-md" role="button" id="saveproductcat" onclick="SaveProductCategory()" disabled>Save</button>
    <button id="addRow" class="btn btn-primary btn-md" role="button">Add Product Category</button>
    <button class="btn btn-primary btn-md" role="button" onclick="history.back();"  id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/Marble/Index'">Close</button>
</div>
<script>

    var updatedArray = [];
    function UpdatedList(index) {
        if (!updatedArray.includes(index)) {
            updatedArray.push(index);
        }
    }

    $(document).ready(function () {
        var table = $('#marbleTable').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            }
        });
        $('#addRow').on('click', function () {
            $('#saveproductcat').removeAttr('disabled');
            var categoryListOptions = '';

              @foreach (var dow in ViewBag.categories[0].Categories)
              {
                   @: categoryListOptions = categoryListOptions + '<option id="@dow.Id" value="" >@dow.Value</option>';
              }
            categoryListOptions = categoryListOptions + ' </select>';
            table.row.add([
                '<a href="#"></a>',
                '<input type="text" value="" />',
                '<select name="categoryList" id="categoryList">' + categoryListOptions,
                '<input type="checkbox" />',
            ]).draw(false);

        });
        $(".tblRow").on("change", function (e) {
            $('#saveproductcat').removeAttr('disabled');
            UpdatedList($(this).parent().index());
        });
    });

    function SaveProductCategory() {
        if (updatedArray.length > 0) {
            var productCategories = [];
            var table = document.getElementById('marbleTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                var rowIndex = r + 1;

                if (updatedArray.includes(r)) {
                    var selectedIndex = table.rows[rowIndex].cells[2].children[0].options["selectedIndex"];
                    productCategories.push({
                        Id: table.rows[rowIndex].cells[0].innerHTML,
                        Name: table.rows[rowIndex].cells[1].children[0].value,
                        ParentCategory: table.rows[rowIndex].cells[2].children[0].options[selectedIndex].innerHTML,
                        Active: table.rows[rowIndex].cells[3].children[0].checked,
                    });
                }
            }
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("UpdateProductCategories", "Product")',
                data: JSON.stringify({ categories: productCategories }),
                dataType: "json",
                success: function (data) {
                    alert('Data Saved');
                    location.reload();
                },
                error: function (e) {
                    alert(e);
                }
            });
        }
    }
</script>
